<!--  -->
<template>
  <div>
    <!-- 未编译的内容 -->
    <h2 style="width: 100%; text-align: center">未编译的内容</h2>
    <div>
      <div v-for="(item, index) in json_data" :key="index">
        <div
          v-for="(items, indexs) in item"
          :key="indexs"
          v-html="items.value"
        ></div>
      </div>
    </div>
    <!-- 编译完成 -->
    <h2 style="width: 100%; text-align: center">编译完成</h2>
    <div id="content-dom">
      <div v-for="(item, index) in json_data_filter_data" :key="index">
        <div
          v-for="(items, indexs) in item"
          :key="indexs"
          v-html="items.value"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
import json_data from "./json/data";
export default {
  data() {
    return {
      json_data: [],
      json_data_filter_data: [],
      json_obj: {
        a: 0,
        b: 0,
        c: 0,
        d: 0,
      },
    };
  },

  components: {},

  computed: {},

  mounted() {
    this.json_data = json_data;
    this.json_data_filter_data = this.json_data_filter();
    console.log(this.json_data);
    console.log(this.json_data_filter_data);
    console.log(Object.keys(this.json_obj));
    let dom = document.getElementById("content-dom");
    // 获取dom添加监听事件
    dom.addEventListener("click", (e) => {
      if (e.target.dataset["grepitem"] && e.target.dataset["row"] && e.target.dataset["rol"] ) {
        let row = e.target.dataset["row"];
        let rol = e.target.dataset["rol"];
        let grepitem = e.target.dataset["grepitem"];
        console.log(this.json_data_filter_data[row][rol].grep[grepitem]);
      } else {
        return false;
      }
    });
  },

  methods: {
    //   数据过滤，将占位符替换为标签
    json_data_filter() {
      let id = 0;
      let arr = JSON.parse(JSON.stringify(json_data));
      arr = arr.map((item, index) => {
        item.map((items, indexs) => {
          id++;
          if (items.type == 1) {
            items.id = `text_${id}`;
            if (items.grep) {
              // 遍历对象获取key值
              Object.keys(items.grep).forEach((grep_item) => {
                id++;
                items.grep[grep_item].id = `grep_${id}`;
                // 创建html元素标签
                let span_data = `<span 
                id='${items.grep[grep_item].id}'
                data-grepitem='${grep_item}' 
                data-row='${index}' 
                data-rol='${indexs}' 
                style="background:${
                  items.grep[grep_item].grep_type == 1
                    ? "#C7DBFE"
                    : items.grep[grep_item].grep_type == 2
                    ? "#B1E8D4"
                    : items.grep[grep_item].grep_type == 3
                    ? "#FCE3B0"
                    : items.grep[grep_item].grep_type == 4
                    ? "#E0E0E0"
                    : ""
                }">
                ${items.grep[grep_item].showName}
                </span>`;
                // 通过key值替换字符串中的占位符
                items.value = items.value.replace(grep_item, span_data);
              });
            }
          }
          return items;
        });
        return item;
      });
      return arr;
    },
  },
};
</script>
<style lang='scss' scoped>
</style>